/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-03-02 10:59:45
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-09-08 08:50:57
 * @FilePath: /utools_web/src/components/Header/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { doFetch } from '@/utils/doFetch';
import { Avatar, message } from 'antd';
import './index.less';

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

const Header = ({ currentUser, mode, colorPrimary, size }) => {
  const imageUrl = currentUser?.headUrl ?? null;

  const uploadButton = (
    <Avatar size={size ?? 45} style={{ flexShrink: 0 }}>
      {currentUser?.name?.charAt(0)}
    </Avatar>
  );

  return (
    <div
      className={'cardh'}
      style={{
        backgroundColor: mode === 'light' ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.1)',
        '--size': size ? `${size + 4}px` : '52px',
        '--sizes': size ? `${size}px` : '48px',
      }}
    >
      <div className="bganimate" >
        {imageUrl ? (
          <Avatar size={size ?? 48} style={{ flexShrink: 0 }} src={imageUrl} />
        ) : (
          uploadButton
        )}
      </div>
      <div className="blob" style={{ backgroundColor: colorPrimary }}></div>
    </div>
  );
};
export default Header;
